<template>
    <a-collapse :bordered="false">
        <template #expandIcon="props">
            <CaretRightOutlined :rotate="props.isActive ? 90 : 0"/>
        </template>
        <a-collapse-panel key="1" :header="chartI18n('common.labelSetting','标签设置')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.radarConfig.show"/>
                </span>
            </template>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="chartI18n('common.fontSize','字体大小')+'(px)'">
                        <a-input placeholder="输入内容" type="number"
                                 v-model:value="config.styles.radarConfig.fontSize"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="chartI18n('common.fontSize','字体颜色')">
                        <a-input v-model:value="config.styles.radarConfig.fontColor" type="color"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="chartI18n('common.showName','展示名称')">
                        <a-switch size="small" v-model:checked="config.styles.radarConfig.nameShow"/>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="chartI18n('common.showValue','展示数值')">
                        <a-switch size="small" v-model:checked="config.styles.radarConfig.numericalShow"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="2" :header="radarI18n('radarSettings','雷达图设置')">
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('radarRadius','雷达半径')">
                        <a-input type="number" :min="1" v-model:value="config.styles.radarConfig.radius">
                            <template #addonAfter>
                                <a-select v-model:value="config.styles.radarConfig.suffix">
                                    <a-select-option value="px">px</a-select-option>
                                    <a-select-option value="%">%</a-select-option>
                                </a-select>
                            </template>
                        </a-input>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('radarCoordinate','雷达坐标')">
                        <a-input v-model:value="config.styles.radarConfig.center"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="3" :header="radarI18n('radarCoordinateAxis','雷达图坐标轴线')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.radarConfig.axisLine.show"/>
                </span>
            </template>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('axisType','轴线类型')">
                        <a-select allowClear v-model:value="config.styles.radarConfig.axisLine.lineStyle.type">
                            <a-select-option value="solid">solid</a-select-option>
                            <a-select-option value="dashed">dashed</a-select-option>
                            <a-select-option value="dotted">dotted</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('color','颜色')">
                        <rx-input-color v-model="config.styles.radarConfig.axisLine.lineStyle.color"
                                        :color="config.styles.radarConfig.axisLine.lineStyle.color"></rx-input-color>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('lineWidth','线宽度')">
                        <a-input-number v-model:value="config.styles.radarConfig.axisLine.lineStyle.width" :min="1"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="4" :header="radarI18n('gridlArea','坐标轴在gridl区域中的分隔线')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.radarConfig.splitLine.show"/>
                </span>
            </template>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('splitLine','分隔线')">
                        <a-select allowClear v-model:value="config.styles.radarConfig.splitLine.lineStyle.type">
                            <a-select-option value="solid">solid</a-select-option>
                            <a-select-option value="dashed">dashed</a-select-option>
                            <a-select-option value="dotted">dotted</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-col>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('dividerColor','分隔线颜色')">
                        <rx-input-color v-model="config.styles.radarConfig.splitLine.lineStyle.color"
                                        :color="config.styles.radarConfig.splitLine.lineStyle.color"></rx-input-color>
                    </a-form-item>
                </a-col>
            </a-row>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('widthLine','分隔线宽度')">
                        <a-input-number v-model:value="config.styles.radarConfig.splitLine.lineStyle.width" :min="1"/>
                    </a-form-item>
                </a-col>
            </a-row>
        </a-collapse-panel>
        <a-collapse-panel key="5" :header="radarI18n('gridLocated','坐标轴在grid区域中的分隔区域')">
            <template #extra>
                <span @click.stop="">
                    <a-switch size="small" v-model:checked="config.styles.radarConfig.splitArea.show"/>
                </span>
            </template>
            <a-row>
                <a-col :span="12">
                    <a-form-item :label="radarI18n('numberCompartments','分隔段数')">
                        <a-input-number v-model:value="config.styles.radarConfig.splitNumber" :min="1"/>
                    </a-form-item>
                </a-col>
            </a-row>
            <div class="splitArea-list" v-for="(colorObj,index) in config.styles.radarConfig.splitArea.areaStyle.color"
                 :key="index">
                <div class="splitArea-common">
                    <rx-input-color v-model="config.styles.radarConfig.splitArea.areaStyle.color[index]"
                                    :color="colorObj"></rx-input-color>
                </div>
                <div class="delete-color" v-if="index>=1">
                    <rx-icon-show @click="deleteColor(index)" icon="icon-lineVue3_delete"></rx-icon-show>
                </div>
            </div>
            <a-button style="width: 100%;margin-bottom: 20px" @click="add" type="primary">
                {{ radarI18n('addTitle', '添加') }}
            </a-button>
        </a-collapse-panel>
    </a-collapse>
</template>

<script>
import RxInputColor from "./rx-input-color.vue";

export default {
    name: "radar-config",
    components: {
        RxInputColor
    },
    inject: {
        config: {
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            radarConfig: {
                show: false,
                fontSize: 12,
                fontColor: "#FFFFFF",
                nameShow: true,
                numericalShow: true,
                radius: 80,
                suffix: "%",
                center: "50%,50%",
                splitNumber: 5,
                axisLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        width: 1,
                        color: 'rgb(255,255,255,1)'
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'solid',
                        width: 1,
                        color: 'rgb(255,255,255,1)'
                    }
                },
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
                    }
                }
            }
        }
    },
    created() {
        if (!this.config.styles.radarConfig) {
            this.config.styles["radarConfig"] = this.radarConfig;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "pieChartLang", key);
        },
        chartI18n(name, text, key) {
            return this.$ti18(name, text, "chartLang", key);
        },
        radarI18n(name, text, key) {
            return this.$ti18(name, text, "radarLang", key);
        },
        add() {
            this.config.styles.radarConfig.splitArea.areaStyle.color.push('rgba(250,250,250,0.3)')
        },
        deleteColor(index) {
            this.config.styles.radarConfig.splitArea.areaStyle.color.splice(index, 1)
        }
    }
}
</script>

<style scoped>
.splitArea-list {
    display: flex;
    margin-bottom: 10px;
}

.splitArea-common {
    width: 350px;
    margin-right: 10px;
}

.delete-color {
    border-radius: 15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #ff585a;
    display: inline-block;
    cursor: pointer;
    color: white;
    line-height: 30px;
    z-index: 99;
    font-size: 18px;
}
</style>
